<template>
	<div>
		<div class="recommend-title">热销推荐</div>
		<ul>
			<router-link
				tag="li"
				class="item border-bottom"
				v-for="item of list"
				:key="item.id"
				:to="'/detail/' + item.id"
			>
					<img class="item-img" :src="item.imgUrl">
					<div class="item-info">
						<p class="item-title">{{item.title}}</p>
						<p class="item-desc">{{item.desc}}</p>
						<button class="item-button">查看详情</button>
					</div>
			</router-link>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'HomeRecommend',
	props: {
		list: Array
	}
	// data () {
	// 	return {
	// 		recommendList: [{
	// 			id: '0001',
	// 			imgUrl: 'https://imgs.qunarzz.com/sight/p0/1506/f6/f6b727f036fe5d6d.water.jpg_200x200_a3c26b4d.jpg',
	// 			title: '鼓浪屿',
	// 			desc: '这个冬天不干燥，养生养颜休闲一举两得，这里有厦门独特的温泉渡假旅游区'
	// 		}, {
	// 			id: '0002',
	// 			imgUrl: 'https://imgs.qunarzz.com/sight/p0/1912/36/36403a427c245524a3.img.jpg_200x200_413d2ec2.jpg',
	// 			title: '厦门日月谷温泉渡假村',
	// 			desc: '环境优雅清新，若隐若现的天籁式背景音乐和随处可见的绿色植物，使人仿佛置身于山清水秀的大自然中。在这里，你可以畅游在碧波泳池中，寻找鸟叫声的源头'
	// 		}, {
	// 			id: '0003',
	// 			imgUrl: 'https://imgs.qunarzz.com/sight/p0/1907/c7/c7d20f91a4a2d172a3.img.jpg_200x200_614fd219.jpg',
	// 			title: '环鼓浪屿夜游-鹭江之星号',
	// 			desc: '体验厦门豪华邮轮 领略鹭岛绚丽夜景，环鼓浪屿夜游将启用厦门港内超豪华游轮——鹭江之星'
	// 		}]
	// 	}
	// }
}
</script>

<style lang="stylus" scoped>
	@import '~styles/mixins.styl'
	.recommend-title
		line-height: .8rem
		background: #eee
		text-indent: .2rem
	.item
		overflow: hidden
		display: flex
		height: 1.9rem
		padding: .15rem
		border-bottom: 1px #eee solid
	.item-img
		width: 1.7rem
		height: 1.7rem
		padding: .1rem
	.item-info
		flex: 1
		padding: .1rem
		min-width: 0
		.item-title
			line-height: .54rem
			font-size: .32rem
			ellipsis()
		.item-desc
			line-height .4rem
			color: #ccc
			ellipsis()
		.item-button
			line-height: .44rem
			margin-top: .16rem
			background: #ff9300
			padding: 0 .2rem
			border-radius: .06rem
			color: #fff
</style>
